<template>  
  <div class="frist">  
    <p>请输入一个数字n:</p>  
    <input v-model.number="n" type="number" placeholder="输入数字">  
    <button @click="calculateOddSum">计算奇数和</button>  
    <p class="result">1到{{ n }}的奇数和是: {{ oddSum }}</p>  
  </div>  
</template>  
  
<script setup>  
import { ref } from 'vue';  
  
const props = defineProps({  
  oddSum: Number  
});  
  
const emit = defineEmits(['update:oddSum']);
const n = ref(null);  
  
const calculateOddSum = () => {  
  if (n.value === null || !Number.isInteger(n.value) || n.value < 1) {  
    alert('请输入一个正整数！');  
    return;  
  }  
  let sum = 0;  
  for (let i = 1; i <= n.value; i++) {  
    if (i % 2 !== 0) {  
      sum += i;  
    }  
  }  
  emit('update:oddSum', sum);  
};  
</script>
<style scoped>  
.frist {  
  font-family: Arial, sans-serif;  
  max-width: 400px;  
  margin: 20px auto; 
  padding: 20px;  
  background-color: #f9f9f9;  
  border-radius: 8px;  
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);  
  text-align: center;  
}  
  
p {  
  margin-bottom: 15px; 
  font-size: 16px;  
  color: #333;  
}  
  
input[type="number"] {  
  width: 100%;   
  max-width: 150px;  
  padding: 8px; 
  border: 1px solid #ccc;  
  border-radius: 4px;  
  font-size: 16px;  
  text-align: center;  
  margin-bottom: 15px; 
  box-sizing: border-box; 
}  
  
button {  
  width: 120px;  
  padding: 8px 16px;  
  background-color: #4CAF50;  
  color: white;  
  border: none;  
  border-radius: 4px;  
  cursor: pointer;  
  font-size: 16px;  
  margin-bottom: 20px; 
  transition: background-color 0.3s ease;  
}  
  
button:hover {  
  background-color: #45a049;  
}  
  
.result {  
  font-size: 18px;  
  font-weight: bold;  
  color: #333;  
  margin-bottom: 10px; 
}  
</style>